class SimplePage {

    //TODO 
    //1、新增页面加载状态
    //2、新增页面控制代码
    //3、新增Marker、Popup控制代码

    constructor(book, pageConfig)
    {
        this.book = book;
        this.pageConfig = pageConfig;
        this.loaded = false;
    }

    loadPage()
    {      
        var container = document.createElement('div');
        var chapter = document.createElement('div');
        container.setAttribute('id', this.pageConfig.id);
        container.classList.add('step');

        if (this.pageConfig.title) {
            var title = document.createElement('h3');
            title.innerText = pageConfig.title;
            chapter.appendChild(title);
        }

        if (this.pageConfig.image) {
            var image = new Image();
            image.src = page.image;
            chapter.appendChild(image);
        }

        if (this.pageConfig.description) {
            var story = document.createElement('p');
            story.innerHTML = this.pageConfig.description;
            chapter.appendChild(story);
        }
        
        container.appendChild(chapter);

        return container;
    }

    setActived(active)
    {
        if(active)
        {
            //飞到地图指定位置
            this.book.mapbook.map.flyTo(this.pageConfig.location);
            //加载图标
            this.loadMakers();
            this.loaded = true;
        }
        else
        {
            this.loaded = false;
        }
    }

    loadMakers() {
        if(this.pageConfig.markers && !this.loaded)
        {
            var that = this;
            this.pageConfig.markers.forEach(marker => {
                var mapMarker;
                if (marker.icon) {
                    var element = document.createElement('div');
                    element.className = 'marker';
                    element.style.width = marker.icon.size[0] + 'px';
                    element.style.height = marker.icon.size[1] + 'px';
                    var img = document.createElement("img");
                    if(marker.icon.url){
                        img.src = marker.icon.url;
                    }
                    else{
                        img.src = "../assets/img/location.png";
                    }
                    img.style.width = "100%";
                    img.style.height = "100%";
                    element.appendChild(img);

                    element.addEventListener("click",function(event){
                        event.key = marker.key;
                        that.book.mapbook.onMarkerClicked(event);
                    });
                    // add marker to map
                    mapMarker = new mapboxgl.Marker(element).setLngLat(marker.location);

                } else {
                    var element = document.createElement('div');
                    element.className = 'marker';
                    element.style.width = '40px';
                    element.style.height = '40px';
                    var img = document.createElement("img");
                    img.src = "../assets/img/location.png";
                    img.style.width = "100%";
                    img.style.height = "100%";
                    element.appendChild(img);

                    element.addEventListener("click",function(event){
                        event.key = marker.key;
                        that.book.mapbook.onMarkerClicked(event);
                    });
                    mapMarker = new mapboxgl.Marker(element).setLngLat(marker.location);
                }

                mapMarker.addTo(that.book.mapbook.map);
            }); 
        }
    }

    clearMarkers()
    {
        //清空marker 和 popup
    }
}

class SimplePageFactory
{
    newPage(book, pageConfig)
    {
        return new SimplePage(book, pageConfig);
    }
}